import React from 'react';
import { Tabs, Card, Space } from 'antd';
import type { TabsProps, CollapseProps } from 'antd';

const onChange = (key: string) => {
    console.log(key);
};

const text = ` 15813467911 `;


const items: TabsProps['items'] = [
    {
        key: '1',
        label: '待接单',
        children: <div>
            <p>{text}</p>

        </div>,
    },
    {
        key: '2',
        label: '待发出',
        children: 'Content of Tab Pane 2',
    },
    {
        key: '3',
        label: '待送达',
        children: 'Content of Tab Pane 3',
    },
    {
        key: '4',
        label: '已完成',
        children: 'Content of Tab Pane 3',
    },
    {
        key: '5',
        label: '取消/退款',
        children: 'Content of Tab Pane 3',
    },
];

const Data: React.FC = () => {


    return <div>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        <Card style={{ width: 300 }}>
            <p>商品名称示例</p>
            <p>￥100.00（含餐盒费￥2.00）</p>
        </Card>
        <Card style={{ width: 300 }}>
            <p>商品名称示例</p>
            <p>￥100.00（含餐盒费￥2.00）</p>
        </Card>
    </div>
};

export default Data;